const bucket = new WeakMap()
const obj = { ok: true, text: '巨旭', foo: 1 }
let activeEffect = null 
const effect = (fn) => {
    activeEffect = fn
    fn()
}
const track = (target, key) => {
    let depsMap = bucket.get(target)
    if (!depsMap) bucket.set(target, depsMap = new Map())
    let deps = depsMap.get(key)
    if (!deps) depsMap.set(key, deps = new Set())
    deps.add(activeEffect)
}
const trigger = (target, key) => {
    const depsMap = bucket.get(target)
    if (!depsMap) return true
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn());
}
const data = new Proxy(obj, {
    get(target, key) {
        if (!activeEffect) return target[key]
        // 追踪的核心 
        track(target, key)
        return target[key]
    },
    set(target, key, newVale) {
        target[key] = newVale
        // 触发的逻辑
        trigger(target, key)
    }   
})
// 调用effect函数进行注册
effect(() => {
    document.body.innerText = data.text
})
setTimeout(() => {
    data.text = 23333
}, 2000)